// JavaScript Document
(function($){
	$.fn.colorTip = function(settings){
        //设置默认参数
		var defaultSettings = {
            color : "yellow",
            timeout : 500
        };
        //提示框的颜色
        var supportedColors = ['red','green','blue','white','yellow','black'];

        /* 合并默认参数和用户自定义参数 */
        settings = $.extend(defaultSettings,settings);

        //链式调用
        return this.each(function(){
            var $this = $(this);

            // 如果该对象不包含title属性，直接予以返回
            if(!$this.attr('title')) return;

            // 实例化eventScheduler（定时器）
            var scheduleEvent = new eventScheduler();

            //实例化Tip(提示类，产生、显示、隐藏)
            var tip = new Tip($this.attr('title'));

            // 产生提示框，并给提示框父容器添加样式
            $this.append(tip.generate()).addClass('colorTipContainer');

            // 检查提示框父容器是否有颜色样式
            var hasClass = false;
            for(var i=0;i<supportedColors.length;i++){
                if($this.hasClass(supportedColors[i])){
                    hasClass = true;
                    break;
                }
            }

            // 如果没有，使用默认的颜色
            if(!hasClass){
                $this.addClass(settings.color);
            }

            // 鼠标滑过提示框父容器时，显示提示框
            // 鼠标移出，则隐藏
            $this.hover(function(){
                tip.show();
                //清理定时器
                scheduleEvent.clear();
            },function(){
                //启动定时器
                scheduleEvent.set(function(){
                    tip.hide();
                },settings.timeout);
            });
            //删除title属性
            $this.removeAttr('title');
        });
	};

    /* 定时器类 */
    function eventScheduler(){}

    //设置定时器类的原型方法--添加与清理定时器
    eventScheduler.prototype = {
        //设置定时器
        set : function (func,timeout){
            this.timer = setTimeout(func,timeout);
        },
        //清理定时器
        clear : function(){
            clearTimeout(this.timer);
        }
    };
    /* 提示框--标签的产生器 */
    function Tip(txt){
        this.content = txt;//把匹配到的title 里的文字 传进生成的colorTip 标签内
        this.shown = false;
    }

    //提示框原型的相关方法--
    Tip.prototype = {
        //产生提示框
        generate : function(){
            return this.tip || (this.tip = $('<span class="colorTip">'+this.content+
                '<span class="pointyTipShadow"></span><span class="pointyTip"></span></span>'));
        },
        show : function(){
            //显示提示框
            if(this.shown) return;
            this.tip.css('margin-left',-this.tip.outerWidth()/2).fadeIn(100);
            this.shown = true;
        },
        //隐藏提示框
        hide : function(){
            this.tip.hide(5);
            this.shown = false;
        }
    };

})(jQuery);

$(function(){
	$('[title]').colorTip({color:'red',timeout:'0'});
});

